<title>Build Your Own vX!</title>
<h1>Build You Own vX!</h1>
<p>Customize your vX! Select the packages you want.</p>

<script type="text/javascript" src="lib/vx.all.js"></script>
<script type="text/javascript">

var selmod = []
var modsrc = {};
var modlist = [];
var modules = {};
var altc = "var _=_?_:{}\n";


_.R(function(){
  _.X("modules.json?"+_.Q({ck: Math.random()}),function(json){
    _.G("selectmodules").innerHTML="";
    modules = _.S(json,true);
    for(var x in modules){
      modlist.push(x)
      var mod = modules[x];
      var tpl = {
        x: x,
        title: mod.desc.replace(/\'/g,'\\\''),
        name: mod.name 
      }
      _.G("selectmodules").innerHTML+=
      _.M('<input id={x} type=checkbox name={x}><label for={x} title="{title}">{name}</label><br>',tpl)
    }
    for(var x in modules){
      _.E(_.G(x), "click", function(){
        checkmods();
      })
    }
  })
})


function checkmods(){
  setTimeout(function(){
  if(selmod.length==modlist.length){
    _.G("all").checked=true
  }else{
    _.G("all").checked=false
  }
  },10);
  for(var k in modules){
    if(_.G(k).checked && _.I(k,selmod) == -1){ //needs inArray functionality
      selmod.push(k);
      for(var y = 0; y < modules[k].dep.length; y++){
        _.G(modules[k].dep[y]).checked = true;
        checkmods();
      }
    }
    if(_.G(k).checked == false && _.I(k,selmod) != -1){
      selmod.splice(_.I(k,selmod),1); //remove from array
    }
  }
  for(var i = 0; i < selmod.length; i++){
    if(!modsrc[selmod[i]]){
      loadmod(selmod[i]);
    }
  }
  rebuild();
}

function loadmod(mod){
  _.X("lib/vx."+mod+".js?"+_.Q({ck: Math.random()}), function(e){
    modsrc[mod] = e;
    rebuild()
  })
}

function rebuild(){
  var code = "";
  var mods = [];
  
  for(var u = 0; u < selmod.length; u++){
    mods.push(modsrc[selmod[u]])
  }
  
  code += mods.join("\n");
  
  code=(code.length>0)?(altc+code):"/*No Modules Selected*/"
  _.G("build").value = code
  _.G("size").innerHTML = "Size: "+code.length+" bytes, "+
    selmod.length + "/" + modlist.length + " selected";
}

function changeall(x){
  for(var k in modules){
    if(x.checked == true){
      _.G(k).checked = true
    }else{
      _.G(k).checked = false
    }
  }
  checkmods();
}

</script>
<input type="checkbox" name=all id=all onchange="changeall(this)">
<label for=all title="Select All"><b>Select All</b></label>

<br>
<div id="selectmodules">Loading Module List...</div>
<br>
<span id="size"></span><br>
<textarea id="build" style="width: 100%; height: 300px">
/*No Modules Selected*/

</textarea>
